<template>
  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="user.newPassword" placeholder="请输入新密码" :type="newPasswordType" @change="newPasswordChange" class="new-password"/>
      <el-icon size="20" class="pwdRef-icon" @mousedown="newPasswordView('input')" @mouseup="newPasswordView('password')">
        <View />
      </el-icon>
      <!-- <br /> -->
      <el-tooltip effect="dark" content="密码强度不能低于60分" placement="bottom-start">
        <el-progress style="ma" :percentage="percentage" :color="progressColor" :format="progressFormat" :text-inside="true" :stroke-width="14" class="pwd-progress"></el-progress>
      </el-tooltip>
      <i v-if="percentage > 0" :class="pwdResult"></i>
      
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {updateUserPwd} from "@/api/system/user";
import {validatePasswd} from "@/api/login";
import {isNotBlank} from "@/utils/base";
import {encrypt2} from "@/utils/jsencrypt";

const { proxy } = getCurrentInstance();

const user = ref({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
});
const percentage = ref(0);
const newPasswordType = ref('password');
const equalToPassword = (rule, value, callback) => {
  if (user.value.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = ref({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, 
  // { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
  ],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
});

const pwdResult = computed(() => {
  return percentage.value >= 60 ? 'el-icon-circle-check pwd-result color-success' : 'el-icon-circle-close pwd-result color-fail';
});

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate(valid => {
    if (valid) {
      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
        proxy.$modal.msgSuccess("修改成功");
      });
    }
  });
};
/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
};
function newPasswordView(type) {
  newPasswordType.value = type
};
function newPasswordChange() {
  if (isNotBlank(user.value.newPassword)) {
    validatePasswd(encrypt2(user.value.newPassword)).then(res => {
      percentage.value = res.data
    })
  }
};
function progressColor(percentage) {
  return percentage < 60 ? '#f56c6c' : percentage < 80 ? '#e6a23c' : '#67c23a';
};
function progressFormat(percentage) {
  return percentage > 0 ? percentage + "分" : "";
};
</script>
<style lang="scss" scoped>
::v-deep .pwd-progress {
  width: calc(100% - 35px);
  display: inline-block;
  cursor: pointer;
  margin-top: 10px;
  //.el-progress-bar {
  //  //width: 85%;
  //}

  .el-progress__text {
    min-width: 50px;
    text-align: center;
  }

  .el-progress-bar__inner {
    text-align: center;

    .el-progress-bar__innerText {
      margin-top: -3px;
    }
  }
}

.new-password {
  width: calc(100% - 35px);
}

.pwdRef-icon {
  // font-size: 20px;
  vertical-align: text-top;
  margin-left: 10px;
  display: inline-block;
  cursor: pointer;
}

.pwdRef-icon:hover {
  color: #1890ff;
}

.pwd-result {
  font-size: 20px;
  vertical-align: text-top;
  margin-left: 10px;
  display: inline-block;
  cursor: pointer;

}

.color-fail {
  color: #f56c6c;
}

.color-success {
  color: #67c23a;
}

</style>
